<template>
	<view class="qq">

		<view class="logo">

		</view>

		<view class="list">

			<image v-if="maskType == 1" class="logo1"
				src="https://tb.wuyouzhuan888.com/applet-icon/0e819ae236702415076f1b448db7f9da.png" mode=""></image>
			<image v-else class="logo1"
				src="https://tb.wuyouzhuan888.com/applet-icon/f318dd3f2ef22531d71180b74f2071a8.png" mode=""></image>

			<view class="item">
				<view class="left">
					<view class="top">
						{{maskType == 1?'超清无水印原图下载':'看广告免费获取结果'}}
					</view>
					<view class="bot">
						今日还可看{{usableDownload}}次
					</view>
				</view>
				<view class="right" @click="clickDownload">
					{{maskType == 1?'看广告下载':'免费获取'}}
					<image class="more" src="https://tb.wuyouzhuan888.com/applet-icon/h3.png" mode="">
					</image>
				</view>
			</view>
			<view class="item" v-if="!isIPhone">
				<view class="left">
					<view class="top">
						{{maskType == 1?'免广告下载超清原图':'免广告获取结果'}}
					</view>
					<view class="bot">
						每天上新大量精选内容
					</view>
				</view>
				<view class="right dif" @click="clickVip">
					立即开通
					<image class="more" src="https://tb.wuyouzhuan888.com/applet-icon/h3.png" mode="">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 可下载次数
			usableDownload: 0,
			// 苹果手机
			isIPhone: false,
			// 弹窗类型 1下载 2测评
			maskType: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {}
		},
		methods: {
			sure() {
				this.$emit('closeDk')
			},
			// 点击下载
			clickDownload() {
				// 点击广告
				this.$emit('clickWatchAd')
			},
			// 点击会员
			clickVip() {
				// 点击会员
				this.$emit('clickVip')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.qq {
		position: relative;

		// margin-top: 261rpx;

		width: 638rpx;

		// padding-bottom: 24rpx;
		// background: linear-gradient(180deg, #373C5F 0%, #242234 100%);
		.list {
			padding-bottom: 24rpx;
			background: linear-gradient(180deg, #373C5F 0%, #242234 100%);
			border-radius: 20rpx;

			// padding-top: 244rpx;
			.item {
				margin: 0 24rpx 32rpx;

				&:last-child {
					margin-bottom: 0;
				}

				padding: 32rpx 0 29rpx 34rpx;
				background: #3A3D68;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					.top {
						font-size: 30rpx;
						font-family: PingFang HK-Light, PingFang HK;
						font-weight: 300;
						color: #FFFFFF;
					}

					.bot {
						margin-top: 6rpx;
						font-size: 24rpx;
						font-family: PingFang HK-Light, PingFang HK;
						font-weight: 300;
						color: #7D92FF;
						line-height: 28px;
					}
				}

				.right {
					display: flex;
					align-items: center;
					width: 231rpx;
					padding-left: 68rpx;
					font-size: 28rpx;
					font-family: PingFang HK-Light, PingFang HK;
					font-weight: 300;
					color: #FFFFFF;
					height: 60rpx;
					background: url('https://tb.wuyouzhuan888.com/applet-icon/h1.png') no-repeat;
					background-size: cover;

					&.dif {
						background: url('https://tb.wuyouzhuan888.com/applet-icon/h2.png') no-repeat;
						background-size: cover;
					}

					.more {
						width: 11rpx;
						height: 19rpx;
						margin-left: 13rpx;
					}
				}

			}
		}


		.logo {
			// position: absolute;
			width: 372rpx;
			height: 200rpx;
			// top: -128rpx;
			// left: 50%;

		}

		.logo1 {
			margin: -126rpx auto 0 133rpx;
			// position: absolute;
			width: 372rpx;
			height: 309rpx;
			// top: -132rpx;
			// left: 50%;
			// margin-left: -128rpx;
		}

	}
</style>